<template>
  <div class="sport-data-card">
    <h3>今日运动数据</h3>
    <div class="data-item" :class="{ 'updated': isUpdated }">
      <span>运动时长</span>
      <span>{{ time }}分钟</span>
    </div>
    <div class="data-item" :class="{ 'updated': isUpdated }">
      <span>行走步数</span>
      <span>{{ foots }}步</span>
    </div>
    <div class="data-item" :class="{ 'updated': isUpdated }">
      <span>运动距离</span>
      <span>{{ long }}公里</span>
    </div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script setup>
import { ref, onUpdated } from 'vue';

const time = ref(0);
const foots = ref(0);
const long = ref(0);
const isUpdated = ref(false);

const updateData = () => {
  time.value = 68;
  foots.value = 11896;
  long.value = 7.96;
};

onUpdated(() => {
  isUpdated.value = true;
  setTimeout(() => {
    isUpdated.value = false;
  }, 2000);
});
</script>

<style scoped>
.sport-data-card {
  width: 280px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

h3 {
  text-align: center;
  margin-bottom: 16px;
}

.data-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #333;
}

/* 确保样式优先级正确，明确设置颜色和加粗 */
.data-item.updated {
  color: #28a745 !important;
  font-weight: bold !important;
}

button {
  width: 100%;
  padding: 8px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}
</style>